<template>
    <div class="box">
        <div class="top">
            <div class="name">
                就诊人：<span>{{jbxx.xm}}</span>
                <!-- <span class="color">就诊中</span> -->
            </div>
            <div class="jzinfo">
                <p>就诊日期：<span>{{mzzd.jzsj}}</span></p>
                <p>流水号：<span>{{mzzd.jzlsh}}</span></p>
                <p>就诊医院：<span>{{mzzd.jzyy}}</span></p>
                <p>科室：<span>{{mzzd.jzks}}</span></p>
            </div>
            <div class="jzfy">
                <div class="item">
                    <div class="left fl">
                        <img src="../../assets/images/￥.png" alt="">
                        就诊费用共计：<span class="colorblue">{{jzfy.fye}}</span>
                    </div>
                    <div class="right fr" @click="viewMore">
                        <span class="more" >{{viewText}}</span><img src="../../assets/images/more.png" alt="">
                    </div>
                </div>

                <div class="item-detail" v-show="isShow">
                    <div class="item "  v-for="(item,i) in jzfy.child " :key='i' >
                        <span class="circle"></span>{{item.xm}}：{{item.fye}}元
                        <!-- 下面的有就显示，没有就不显示，自己假判断 -->
                        <p class="induction" v-for="(item1,i) in item.child " :key='i'>
                            {{item1.xm}}
                        </p>
                    </div>

                </div>



            </div>
        </div>
        <div class="main">
            <div class="tab-title">
                <div class="item" v-for="(item,index) in tab" :key="index" @click="tabchange(index,item.title)">
                    <span :class="index === curIndex?'cur':''" >{{item.title}}</span>
                </div>
            </div>
            <swiper ref="mySwiper" >
                <swiper-slide>
                    <div class="tab-main jjzl" >
                        <p>
                            <span>挂号时间：</span> {{GTHSJ}}
                        </p>
                        <p>
                            <span>就诊卡号：</span>{{mzzd.tmkh}}
                        </p>
                        <p>
                            <span>卡类型：</span>{{mzzd.klx}}
                        </p>
                        <!--<p>-->
                        <!--<span>社保类型：</span>城镇医保-->
                        <!--</p>-->
                        <p>
                            <span>就诊流水号：</span>{{mzzd.jzlsh}}
                        </p>
                        <p>
                            <span>就诊诊断：</span>{{mzzd.jzzd}}
                        </p>
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <div class="tab-main yyxx" >
                        <!-- 公用table组件 -->
                        <commonTable :listData="CISPrescriptionDetailParams"></commonTable>
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <div class="tab-main jybg" >
                        <!--检验报告公用组件  -->
                        <jyReport :listData="getLISReportParams"></jyReport>

                    </div>
                </swiper-slide>
                <swiper-slide>
                    <div class="tab-main jcbg" >
                        <!-- 检查报告公用组件 -->
                        <jcReport :listData="RISReportParams"></jcReport>
                    </div>
                </swiper-slide>
            </swiper>




        </div>
        <!-- 数据仅供参考提示，hosName通过接口获得，在该组件赋值传给子组件，首页不需要传值，默认为空 -->
        <tips :hosName="hosName"></tips>
        <!-- 水印 -->
        <div class="watermark"></div>
    </div>
</template>

<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import {getHisMzRegTimeApi,getMZHISFeeDetailApi,getCISPrescriptionDetailApi,getLeaveHospitalSummaryApi, getZYMedicalRecordApi,getIHDiagnosisDetailApi,getLISReportApi} from '@/api/healthRecords'
    import tips from '@/components/tips.vue'
    import commonTable from '@/components/table'
    import jcReport from '@/components/jcReport'
    import jyReport from '@/components/jyReport'
    export default {
        name: 'mzjlDetail',
        data () {
            return {
                tab: [
                    {
                        title: '就诊记录'
                    }, {
                        title: '门诊处方'
                    }, {
                        title: '检验报告'
                    }, {
                        title: '检查报告'
                    }
                ],
                curIndex: 0,
                curTab: '就诊记录',
                viewText: '明细查看',
                isShow: false,
                //检验报告
                //检查报告
                hosName:JSON.parse(localStorage.getItem('mzjbxx')).jzyy,//医院名称
                jbxx:JSON.parse(localStorage.getItem('jbxx')),
                mzzd: JSON.parse(localStorage.getItem('mzjbxx')),
                CISPrescriptionDetailParams:{"yljgdm":"42502656400","jzlsh":"15102400130024","name":"Mzxx"},//门诊用药信息的参数
                getLISReportParams:{"yljgdm":"42500982800","jzlsh":"20180628230848100","name":"Mzxx"},
                RISReportParams:{"yljgdm":"42502657201","jzlsh":"4100797","name":"Mzxx"},
                MZHISFeeParams:{
                    "yljgdm":"42502657201",
                    "jzlsh":"4100797"
                },
                jzfy:{
                    "fxm":"就诊费用共计", //"父项目
                    "xm":"-",        //"项目
                    "fye":"",             //"费用
                    "cc":"1",             //层次
                    "child":[]
                },
                HisMzRegTimeParameter:{
                    "kh":"M02119099",
                    "klx":"0",
                    "yljgdm":"42500997500",
                    "jzrq":"20190301"
                },
                GTHSJ: ""
            }
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper
            }
        },
        mounted() {
            // current swiper instance
            // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
            this.swiper.slideTo(this.curIndex, 1000, false)
            //  swiper的滑动监听事件，获得当前index
            this.swiper.on('slideChange',()=>{
                this.curIndex = this.swiper.activeIndex
            })
        },
        methods:{
            init() {
                this.CISPrescriptionDetailParams.yljgdm = JSON.parse(localStorage.getItem('mzjbxx')).yljgdm;
                this.CISPrescriptionDetailParams.jzlsh = JSON.parse(localStorage.getItem('mzjbxx')).jzlsh;

                this.getLISReportParams.yljgdm = JSON.parse(localStorage.getItem('mzjbxx')).yljgdm;
                this.getLISReportParams.jzlsh = JSON.parse(localStorage.getItem('mzjbxx')).jzlsh;

                this.RISReportParams.yljgdm = JSON.parse(localStorage.getItem('mzjbxx')).yljgdm;
                this.RISReportParams.jzlsh = JSON.parse(localStorage.getItem('mzjbxx')).jzlsh;

                this.MZHISFeeParams.yljgdm = JSON.parse(localStorage.getItem('mzjbxx')).yljgdm;
                this.MZHISFeeParams.jzlsh = JSON.parse(localStorage.getItem('mzjbxx')).jzlsh;

                this.HisMzRegTimeParameter.kh = JSON.parse(localStorage.getItem('mzjbxx')).kh;
                this.HisMzRegTimeParameter.klx = JSON.parse(localStorage.getItem('mzjbxx')).klx;
                this.HisMzRegTimeParameter.yljgdm = JSON.parse(localStorage.getItem('mzjbxx')).yljgdm;
                this.HisMzRegTimeParameter.jzlsh = JSON.parse(localStorage.getItem('mzjbxx')).jzlsh;
            },
            // 1.7门诊费用信息getMZHISFeeDetail
            getMZHISFeeDetail() {
                getMZHISFeeDetailApi(JSON.stringify(this.MZHISFeeParams)).then(response => {
                    var jzfy = [];
                    var yiji = [];
                    var erji = [];
                    if (response.data.code == 1) {
                        response.data.data.forEach(item => {
                            item.child = [];
                            if (item.cc == '1') {
                                yiji.push(item)
                            }else if (item.cc == '2') {
                                erji.push(item)
                            }
                        });
                        erji.forEach(item1 => {
                            yiji.forEach(item2 => {
                                if (item1.fxm == item2.xm) {
                                    item2.child.push(item1)
                                }
                            })

                        })
                        this.jzfy.fxm = response.data.data[0].fxm;
                        this.jzfy.xm = response.data.data[0].xm;
                        this.jzfy.fye = response.data.data[0].fye;
                        this.jzfy.cc = response.data.data[0].cc;
                        this.jzfy.child = yiji
                    }
                })
            },
            //1.2.1查询挂号时间getHisMzRegTime
            getHisMzRegTime() {
                getHisMzRegTimeApi(JSON.stringify(this.HisMzRegTimeParameter)).then(response => {
                    if (response.data.code == 1) {
                        this.GTHSJ = response.data.data.GTHSJ
                    }
                })
            },
            tabchange(index,title){
                this.curIndex = index
                this.curTab = title
                this.swiper.slideTo(index,1000,false)
            },
            viewMore(){
                this.isShow = !this.isShow
                if(this.isShow){
                    this.viewText = '收起查看'
                } else {
                    this.viewText = '明细查看'
                }
            }
        },
        components:{
            commonTable,
            jcReport,
            jyReport,
            tips
        },
        created() {
            this.init();
            this.getMZHISFeeDetail();
            this.getHisMzRegTime();
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    .top {
        background: #fff;
        .name {
            border-bottom: #DCDCDC solid 1px;
            font-size: 1.3rem;
            color: #969696;
            padding: 1.3rem 1rem;
            span {
                color: #323333;
            }
            .color {
                float: right;
                color: #11AE2C;
            }
        }
        .jzinfo {
            display: flex;
            flex-wrap: wrap;
            padding: 1rem;
            border-bottom: #DCDCDC solid 1px;
            font-size: 1rem;
            color: #969696;
            padding-bottom: 0;
            p {
                width: 47%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-bottom: 1rem;
                margin-right: 2%;
                span {
                    color: #333;
                }
            }
        }
        .jzfy {
            color: #333;
            border-bottom: #DCDCDC solid 1px;
            .item {
                overflow: hidden;
                padding: 0.6rem 1rem;
                font-size: 1rem;
                .left{
                    img {
                        width: 1.3rem;
                        margin-right: 0.6rem;
                    }
                }
                .right{
                    vertical-align: middle;
                    img {
                        width: 1.2rem;
                        margin-left: 9px;
                    }
                }
                .colorblue {
                    color: #009CDF;
                    font-weight: bold;
                }
                .more {
                    color: #B4B4B4;
                }
                img {
                    vertical-align: middle;
                }


            }
            .item-detail {
                background: #F4F3F3;
                padding: 1rem;

                overflow: hidden;
                .item {
                    float:left;
                    background: url('~@/assets/images/point.png') left 1rem no-repeat;
                    background-size: 0.33rem;
                    padding: 0.5rem 0.8rem;
                    border-bottom: #D2D2D2 solid 1px;
                    color: #666;
                    font-size: 1rem;




                    width:50%;
                    .circle {
                        display: inline-block;
                        border-radius: 50%;
                        background: #009CDF;
                        vertical-align: middle;
                    }
                    .induction {
                        color: #969696;
                        /*width: 60%;*/
                        /*text-align: center;*/
                        margin: 0 auto;
                    }
                }




                .item:last-child{
                    border:none;
                }





                .item:nth-last-child(2){
                    border:none;
                }

            }
        }
    }

    .main {
        background: #fff;
        margin-top: 1rem;
        min-height: 60vh;
        .tab-title {
            display: flex;
            border-bottom: #DCDCDC solid 1px;
            padding:1rem 1rem 0 1rem;
            .item {
                flex: 1;
                font-size: 1rem;
                color: #666;
                text-align: center;
                span {
                    display: inline-block;
                    padding-bottom: 1rem;
                }
                .cur {
                    color: #009CDF;
                    border-bottom: #009CDF solid 2px;
                }
            }
        }
        .tab-main {
            min-height: 10rem;
        }
        .yyxx {
            padding: 24px 20px;
        }
        .jjzl {
            padding: 1.3rem 2rem;
            p {
                font-size: 1rem;
                color: #666666;
                margin-bottom: 1rem;
                span {
                    color: #969696;
                    width: 6rem;
                    display: inline-block;
                    text-align: justify;
                }
            }
        }
    }


</style>
